import { IGetDecisionFlowNodeVariablesRes } from '@/api';
import { MciSvgIcon } from '@/components/base';
import { useDictStore } from '@/store/dict';
import { ElPopconfirm } from 'element-plus';
import { PropType } from 'vue';
import './index.scss';

export const VariableItem = defineComponent({
  props: {
    data: {
      type: Object as PropType<Required<IGetDecisionFlowNodeVariablesRes>[0]>,
      default: () => ({})
    },
    hasAction: {
      type: Boolean,
      default: true
    }
  },
  emits: ['delete', 'edit'],
  setup(props, { emit }) {
    const dictStore = useDictStore();

    return () => {
      return (
        <div class="var-item px-12 h-40 flex justify-between cursor-pointer items-center hover:bg-gray-100">
          <div class="flex gap-12 items-center">
            <div class="var-item__name text-value-12 bg-blue-100 h-20 px-4 py-0 rounded-4">
              {dictStore.fieldTypeMap[props.data.varType!]}
            </div>
            <div class="var-item__name text-value-14 bg-orange-100 px-12 py-4 rounded-4 !text-yellow-800">
              {props.data.varName}
            </div>
            {props.data.initValue && (
              <>
                <span>=</span>
                <div class="var-item__value text-value-14 bg-gray-100 px-8 py-2 rounded-4">{props.data.initValue}</div>
              </>
            )}
          </div>
          {props.hasAction && (
            <div class="var-item__action flex gap-8 py-8" onClick={(e) => e.stopPropagation()}>
              <MciSvgIcon
                onClick={() => {
                  emit('edit', props.data);
                }}
                width={18}
                height={18}
                class="cursor-pointer"
                name="edit"
              />
              <ElPopconfirm
                onConfirm={() => {
                  emit('delete', props.data);
                }}
                confirm-button-text="确定"
                cancel-button-text="取消"
                title="确定删除?">
                {{
                  reference() {
                    return <MciSvgIcon width={18} height={18} class="cursor-pointer" name="close" />;
                  }
                }}
              </ElPopconfirm>
            </div>
          )}
        </div>
      );
    };
  }
});
